<script lang='ts' setup>
import { reactive, ref} from 'vue'
 
const state = reactive({
    tableData: [
		{
			id: 1, 
			name: '',
			six: '女',
			spec: '规格',
			phone: '15502336548',
			level: '2',
			totalPrice: '2562',
			consumePrice: '256',
			registerTime: '2023-02-25 12:12:36',
			staff: '1554562312',
			consumeStore: '雁塔店',
			buyTime: '2023-02-25 12:12:36',
		}
	] as Array<any>,
    rowId: 0
})

const props = withDefaults(defineProps<{
    statistics: any
}>(), {
    statistics: () => ({})
})

const skuTableRef = ref();
const expandSkuMsg = (row: any) => {
    skuTableRef.value.toggleRowExpansion(row);
}

const beforeChangeSku = (row: any) => {
    console.log(row)
    // row.onShelf = !row.onShelf
//   loading2.value = true
//   return new Promise((_, reject) => {
//     setTimeout(() => {
//       loading2.value = false
//       ElMessage.error('Switch failed')
//       return reject(new Error('Error'))
//     }, 1000)
//   })
}

</script>

<template>
    <main>
        <el-table ref="skuTableRef" :data="statistics.skus" style="width: 100%">
            <el-table-column type="expand">
                <template #default="props">
                    <section class="ml80 mr80" v-if="!props.row.isShowSkuList">
                        <el-row>
                            <el-col :xs="24" :sm="8" :md="12" :lg="5" :xl="5" class="mb5">
                                <span>商品分组:此处展示商品分类</span>
                            </el-col>
                            <el-col :xs="24" :sm="8" :md="12" :lg="5" :xl="5" class="mb5">
                                <span>条码:xxx</span>
                            </el-col>
                            <el-col :xs="24" :sm="8" :md="12" :lg="5" :xl="5" class="mb5">
                                <span>操作人:xxx</span>
                            </el-col>
                            <el-col :xs="24" :sm="8" :md="12" :lg="5" :xl="5" class="mb5">
                                <span>操作时间:xxx</span>
                            </el-col>
                            <el-col :xs="24" :sm="8" :md="12" :lg="5" :xl="5" class="mb5">
                                <span>商品分组:xxx</span>
                            </el-col>
                            <el-col :xs="24" :sm="8" :md="12" :lg="5" :xl="5" class="mb5">
                                <span>条码:xxx</span>
                            </el-col>
                            <el-col :xs="24" :sm="8" :md="12" :lg="5" :xl="5" class="mb5">
                                <span>操作人:xxx</span>
                            </el-col>
                            <el-col :xs="24" :sm="8" :md="12" :lg="6" :xl="6" class="mb5">
                                <span>操作时间:xxx</span>
                            </el-col>
                        </el-row>
                    </section>
                </template>
            </el-table-column>
            <el-table-column label="编码" align="center">
                <template #default="scope">
                    <span>{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="图片" align="center">
                <template #default="scope">
                    <div style="display: flex;justify-content:center;align-items: center;">
                        <el-icon title="展开商品详情" @click="expandSkuMsg(scope.row)">
                            <ele-Plus />
                        </el-icon>
                        <el-image class="ml15" style="width:32px; height: 32px;" :src="scope.row.cover"
                            fit="cover" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="品牌" align="center">
                <template #default="scope">
                    <span>{{ scope.row.brand }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" align="center">
                <template #default="scope">
                    <span>{{ statistics.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="属性" align="center">
                <template #default="scope">
                    <span>{{ scope.row.type }}</span>
                </template>
            </el-table-column>
            <el-table-column label="规格" align="center">
                <template #default="scope">
                    <!-- <span>{{ scope.row.name }}</span> -->
                    <span>需要调整</span>
                </template>
            </el-table-column>
            <el-table-column label="零售价" align="center">
                <template #default="scope">
                    <span>￥{{ scope.row.lowPrice }}元</span>
                </template>
            </el-table-column>
            <el-table-column label="来源" align="center">
                <template #default="scope">
                    <span>{{ scope.row.source }}</span>
                </template>
            </el-table-column>
            <el-table-column label="上架状态" align="center">
                <template #default="scope">
                    <el-switch v-model="scope.row.onShelf" :before-change="beforeChangeSku(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column label="销售状态" align="center">
                <template #default="scope">
                    <span>
                        {{ scope.row.salesPolicy == 0 ? '销售' : scope.row.salesPolicy == 1 ? '内采' : '销售/内采' }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button   text type="primary">
                        编辑
                    </el-button>
                    <el-button   text type="primary">
                        更多
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </main>
</template>

<style lang='scss' scoped>

</style>